<template>
  <div class="app-container home">
    <div v-if="!selectedProject" class="project-selection-prompt">
      <div class="icon">📁</div>
      <h2 class="title">请选择一个项目</h2>
      <p class="description">您还没有选择任何项目，请从列表中选择一个项目以继续操作</p>
      <button class="select-button" @click="showProjectList = true,getList()">选择项目</button>
    </div>

    <div v-else class="project-selected-view">
      <div class="selected-icon">✓</div>
      <h2 class="selected-title">当前项目</h2>
      <div class="project-card">
        <h3>{{ selectedProject.name }}</h3>
        <p>{{ selectedProject.remark }}</p>
        <div class="project-meta">
          <span class="meta-item"><i class="el-icon-date"></i> 创建时间: {{ selectedProject.createTime }}</span>
          <span class="meta-item"><i class="el-icon-user"></i> 所属公司: {{ selectedProject.deptName }}</span>
        </div>
      </div>
      <button class="change-button" @click="showProjectList = true" v-if="projectList.length > 1">更换项目</button>
    </div>

    <!-- 项目选择弹窗 -->
    <div v-if="showProjectList" class="project-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>选择项目</h3>
          <span class="close-btn" @click="showProjectList = false">×</span>
        </div>
        <div class="project-list">
          <div
              v-for="project in projectList"
              :key="project.id"
              class="project-item"
              @click="selectProject(project)"
          >
            <div class="project-item-icon">📁</div>
            <div class="project-item-content">
              <h4>{{ project.name }}</h4>
              <p>{{ project.remark }}</p>
              <div class="project-item-meta">
                <span>{{ project.createTime }}</span>
                <span>{{ project.deptName }}</span>
              </div>
            </div>
          </div>
          <div v-if="projectList.length === 0" class="empty-state">
            <div class="empty-icon">📭</div>
            <h3 class="empty-title">暂无项目</h3>
            <p class="empty-description">当前没有可选择的项目，请联系管理员创建项目</p>
            <div class="empty-action">
              <button class="refresh-button" @click="getList">
                <span>🔄</span> 重新加载
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import {ref} from 'vue'
import {listIndexProject} from "@/views/pg/pensionProject/api/project.js";

// 模拟项目数据
const projectList = ref([])

const selectedProject = ref(null)
const showProjectList = ref(false)

const selectProject = (project) => {
  selectedProject.value = project
  showProjectList.value = false
}

getList()

function getList() {
  listIndexProject().then(res => {
    projectList.value = res.data
    if (projectList.value.length == 1) {
      selectProject(projectList.value[0])
    }
  })
}
</script>

<style scoped lang="scss">
.home {
  position: relative;
  min-height: 100vh;
  /* 更换为浅色系背景 */
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  border-radius: 12px;
  padding: 2rem;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #676a6c;
  overflow-x: hidden;
}

.project-selection-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
  transition: all 0.3s ease;
  max-width: 600px;
  margin: 0 auto;
}

.project-selection-prompt:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.project-selection-prompt .icon {
  font-size: 4rem;
  /* 调整图标颜色以匹配浅色背景 */
  color: #4a9eff;
  margin-bottom: 1.5rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.project-selection-prompt .title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.project-selection-prompt .description {
  color: #666;
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 80%;
}

.project-selection-prompt .select-button {
  /* 更换按钮颜色为清新的蓝色 */
  background: linear-gradient(45deg, #4a9eff, #3b82f6);
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.project-selection-prompt .select-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

/* 已选择项目视图 */
.project-selected-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}

.selected-icon {
  width: 60px;
  height: 60px;
  /* 更换选中图标颜色为清新的绿色 */
  background: linear-gradient(45deg, #10b981, #059669);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  margin-bottom: 1rem;
}

.selected-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 2rem;
}

.project-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 500px;
  margin-bottom: 2rem;
  transition: transform 0.3s ease;
  border: 1px solid #eef2f7;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
}

.project-card h3 {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.project-card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #777;
}

.change-button {
  /* 更换更换项目按钮颜色为紫色 */
  background: linear-gradient(45deg, #8b5cf6, #7c3aed);
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
}

.change-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

/* 项目选择弹窗 */
.project-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  animation: modalAppear 0.3s ease;
  border: 1px solid #eef2f7;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.4rem;
}

.close-btn {
  font-size: 2rem;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #333;
}

.project-list {
  padding: 1rem;
  max-height: 60vh;
  overflow-y: auto;
}

.project-item {
  display: flex;
  align-items: center;
  padding: 1.2rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #eef2f7;
}

.project-item:hover {
  background: #f0f9ff;
  transform: translateX(5px);
  border-color: #4a9eff;
}

.project-item-icon {
  font-size: 2rem;
  margin-right: 1rem;
  color: #4a9eff;
}

.project-item-content {
  flex: 1;
}

.project-item-content h4 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.1rem;
}

.project-item-content p {
  margin: 0 0 0.5rem 0;
  color: #666;
  font-size: 0.9rem;
}

.project-item-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home {
    padding: 1rem;
  }

  .project-selection-prompt {
    padding: 2rem 1rem;
  }

  .project-selection-prompt .icon {
    font-size: 3rem;
  }

  .project-selection-prompt .title {
    font-size: 1.4rem;
  }

  .project-card {
    padding: 1.5rem;
  }

  .project-meta {
    flex-direction: column;
  }

  .modal-content {
    width: 95%;
  }

  .project-item {
    flex-direction: column;
    text-align: center;
  }

  .project-item-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

/* 添加空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.7;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.7;
  }
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 0.5rem;
}

.empty-description {
  color: #9ca3af;
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 80%;
}

.refresh-button {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}

.refresh-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}
</style>
